<template>
  <div class="tags_control">
    <router-link
      class="es-tag es-tag-primary es-tag-dot es-tag-closable es-tag-checked"
      v-for="(item, index) in data"
      :key="index"
      :to="{ path: item.path, params: { ...item.params } }"
    >
      <span class="es-tag-text">{{ item.tag }}</span>
      <i class="es-iconfont icon-close"></i>
    </router-link>
  </div>
</template>

<script>
export default {
  name: "TagsControl",
  props: {
    data: {
      type: Array,
      default() {
        return [];
      },
    },
  },
};
</script>

<style lang="scss">
.tags_control {
  a {
    &.es-tag {
      &:hover {
        text-decoration: none;
      }
    }
  }
}
</style>
